.anki-snackbar {
    width: 320px;
    
    .v-snack__wrapper {
        align-items: flex-start;
        min-width: 320px;
        margin: 0px;
        
        .v-snack__content {
            min-width: 320px;
            padding: 0px;
            color: var(--v-text-base);
            
            .v-btn span {
                color: var(--v-text-base);
            }
        }

        .snackbar-title {
            line-height: 36px;
        }
    }
}

.text-block-group {
    overflow-y: hidden !important;
    overflow-x: visible !important;
    
    .subtitle-timestamp {
        background-color: var(--v-primary-base);
        color: white;
        border-radius: 30px;
        width: 72px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;

        &.hidden {
            opacity: 0;
            height: 0px;
            padding: 0px !important;
            pointer-events: none;
        }
    }

    .text-block {
        background-color: var(--v-foreground-base);
        overflow: hidden !important;
        padding: 0px !important;
    }

    .word {
        display: inline-block;
        cursor: pointer;
        margin: 1px 0px;
        height: auto;
        line-height: 100%;
        padding-top: 4px; 
        padding-bottom: 4px;
        transition: .2s;
        color: var(--v-text-base);
        border-radius: 0px;
        border-top: 1px solid rgba(0, 0, 0, 0);
        border-bottom: 1px solid rgba(0, 0, 0, 0);
        transition: background-color 0s;

        .rubyword {
            pointer-events: none;
        }

        &:not(.phrase):not(.highlighted) {
            border-radius: 6px;
        }

        &.space {
            margin-left: 4px;
        }

        &[stage="-7"], &[stage="-6"], &[stage="-5"], 
        &[stage="-4"], &[stage="-3"], &[stage="-2"], &[stage="-1"] {
            color: var(--v-highlightedWordText-base);
            margin-left: .5px !important;
            margin-right: .5px !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

        &[stage="1"] {
            color: var(--v-ignoredWordTextColor-base);
        }

        &[stage="-1"] {
            background-color: var(--v-highlightedWordLevel1-base);
        }

        &[stage="-2"] {
            background-color: var(--v-highlightedWordLevel2-base);
        }
        
        &[stage="-3"] {
            background-color: var(--v-highlightedWordLevel3-base);
        }
        
        &[stage="-4"] {
            background-color: var(--v-highlightedWordLevel4-base);
        }
        
        &[stage="-5"] {
            background-color: var(--v-highlightedWordLevel5-base);
        }
        
        &[stage="-6"] {
            background-color: var(--v-highlightedWordLevel6-base);
        }

        &[stage="-7"] {
            background-color: var(--v-highlightedWordLevel7-base);
        }
        
        &.no-highlight {
            background-color: rgba(0, 0, 0, 0) !important;
            color: var(--v-text-base) !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0);
        }

        &[stage="2"] {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }


        &.phrase {
            color: var(--v-highlightedWordText-base);
            margin-left: 0 !important;
            margin-right: 0 !important;

            &[phraseStage="-1"] {
                background-color: var(--v-highlightedWordLevel1-base);
                border-top: 1px solid var(--v-highlightedWordLevel1-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel1-darken1);
            }
    
            &[phraseStage="-2"] {
                background-color: var(--v-highlightedWordLevel2-base);
                border-top: 1px solid var(--v-highlightedWordLevel2-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel2-darken1);
            }
            
            &[phraseStage="-3"] {
                background-color: var(--v-highlightedWordLevel3-base);
                border-top: 1px solid var(--v-highlightedWordLevel3-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel3-darken1);
            }
            
            &[phraseStage="-4"] {
                background-color: var(--v-highlightedWordLevel4-base);
                border-top: 1px solid var(--v-highlightedWordLevel4-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel4-darken1);
            }
            
            &[phraseStage="-5"] {
                background-color: var(--v-highlightedWordLevel5-base);
                border-top: 1px solid var(--v-highlightedWordLevel5-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel5-darken1);
            }
            
            &[phraseStage="-6"] {
                background-color: var(--v-highlightedWordLevel6-base);
                border-top: 1px solid var(--v-highlightedWordLevel6-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel6-darken1);
            }
    
            &[phraseStage="-7"] {
                background-color: var(--v-highlightedWordLevel7-base);
                border-top: 1px solid var(--v-highlightedWordLevel7-darken1);
                border-bottom: 1px solid var(--v-highlightedWordLevel7-darken1);
            }
            
            &[phrasestage="0"] {
                border-color: rgb(180, 180, 180) !important;
                color: var(--v-text-base);
                
                &[stage="2"] {
                    color: var(--v-textDark-base);
                }

                &.no-highlight {
                    border-color: rgb(180, 180, 180) !important;
                }
            }

            &[phrasestage="0"]:not([stage="2"]) {
                background-color: rgba(0, 0, 0, 0);

                &.highlighted {
                    background-color: var(--v-readerWordSelection-base);
                }
            }

            &.no-highlight {
                background-color: rgba(0, 0, 0, 0);
                border-color: rgb(180, 180, 180) !important;
                color: var(--v-text-base);


            }

            &.highlighted, &:hover, &[phrasestage="0"]:hover {
                background-color: var(--v-readerWordSelection-base);
            }
        }

        &.phrase-start {
            border-left: 1px solid var(--v-text-base);
            border-top-left-radius: 6px !important;
            border-bottom-left-radius: 6px !important;
            margin-left: .5px !important;
            padding-left: 4px !important;

            &[phraseStage="-1"] {
                border-left: 1px solid var(--v-highlightedWordLevel1-darken1);
            }
    
            &[phraseStage="-2"] {
                border-left: 1px solid var(--v-highlightedWordLevel2-darken1);
            }
            
            &[phraseStage="-3"] {
                border-left: 1px solid var(--v-highlightedWordLevel3-darken1);
            }
            
            &[phraseStage="-4"] {
                border-left: 1px solid var(--v-highlightedWordLevel4-darken1);
            }
            
            &[phraseStage="-5"] {
                border-left: 1px solid var(--v-highlightedWordLevel5-darken1);
            }
            
            &[phraseStage="-6"] {
                border-left: 1px solid var(--v-highlightedWordLevel6-darken1);
            }
    
            &[phraseStage="-7"] {
                border-left: 1px solid var(--v-highlightedWordLevel7-darken1);
            }
        }

        &.phrase-end {
            border-right: 1px solid var(--v-text-base);
            border-top-right-radius: 6px !important;
            border-bottom-right-radius: 6px !important;
            margin-right: .5px !important;
            padding-right: 4px !important;

            &[phraseStage="-1"] {
                border-right: 1px solid var(--v-highlightedWordLevel1-darken1);
            }
    
            &[phraseStage="-2"] {
                border-right: 1px solid var(--v-highlightedWordLevel2-darken1);
            }
            
            &[phraseStage="-3"] {
                border-right: 1px solid var(--v-highlightedWordLevel3-darken1);
            }
            
            &[phraseStage="-4"] {
                border-right: 1px solid var(--v-highlightedWordLevel4-darken1);
            }
            
            &[phraseStage="-5"] {
                border-right: 1px solid var(--v-highlightedWordLevel5-darken1);
            }
            
            &[phraseStage="-6"] {
                border-right: 1px solid var(--v-highlightedWordLevel6-darken1);
            }
    
            &[phraseStage="-7"] {
                border-right: 1px solid var(--v-highlightedWordLevel7-darken1);
            }
        }

        &[stage="2"] {
            background-color: var(--v-newWord-base);
            color: var(--v-highlightedWordText-base);
            margin-left: .5px !important;
            margin-right: .5px !important;
        }
        
        &.highlighted, &:hover {
            background-color: var(--v-readerWordSelection-base) !important;
            color: var(--v-highlightedWordText-base) !important;
            border-color: var(--v-readerWordSelection-base) !important;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }
        
        // highlighted rounding
        &.highlighted:not(.highlighted ~ *) {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        &.highlighted:not(:has(~ .highlighted)) {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }

        &.space-after {
            margin-right: 5px !important;
            
            &.highlighted:not(.highlight-end):not(.phrase-end),
            &.phrase:not(.phrase-end) {
                margin-right: 0px !important;
                padding-right: 5px !important;
            }
        }
    }

    &.plain-text-mode .word, &.plain-text-mode .word:hover {
        margin-left: none !important;
        margin-right: none !important;
        padding-left: none !important;
        padding-right: none !important;
        background-color: rgba(0, 0, 0, 0) !important;
        color: var(--v-text-base) !important;
        border: none !important;
        cursor: default !important;
        user-select: text !important;

        &[stage="-7"], &[stage="-6"], &[stage="-5"], &[stage="-4"], 
        &[stage="-3"], &[stage="-2"], &[stage="-1"], &[stage="2"], 
        &.phrase, &.phrase-start, &.phrase-end, &.highlighted, &:hover, 
        &.space-after, &.space-after.highlighted, &.space-after.phrase {
            margin-left: 0px !important;
            margin-right: 0px !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
            background-color: rgba(0, 0, 0, 0) !important;
            color: var(--v-text-base) !important;
            border: none !important;
            cursor: default !important;
            user-select: text !important;
        }
    }
}
